// React.memo props比较机制

// 1. 传递一个简单类型的prop   prop变化时组件重新渲染

// 2. 传递一个引用类型的prop   比较的是新值和旧值的引用是否相等  当父组件的函数重新执行时，实际上形成的是新的数组引用

// 3. 保证引用稳定 -> useMemo 组件渲染的过程中缓存一个值

import { memo, useMemo, useState } from 'react'

// MemoSon1会随着父组件渲染而发生渲染，原因是父组件每次渲染都产生了一个新list1变量引用，引用类型比较新旧值不相等，于是MemoSon1会重新渲染
const MemoSon1 = memo(function Son ({ list }) {
  console.log('子组件MemoSon1重新渲染了')
  return <div>this is MemoSon1 {list}</div>
})

// MemoSon2不会随着父组件渲染而发生渲染，使用了useMemo包裹的函数返回的是同一个对象的引用（缓存）
const MemoSon2 = memo(function Son ({ list }) {
  console.log('子组件MemoSon2重新渲染了')
  return <div>this is MemoSon2 {list}</div>
})


function App04 () {
  const [count, setCount] = useState(0)

  const list1 = [1, 2, 3]

  const list2 = useMemo(() => {
    return [1, 2, 3]
  }, [])

  return (
    <div className="App">
      <MemoSon1 list={list1} />
      <MemoSon2 list={list2} />
      <button onClick={() => setCount(count + 1)}>更改Count值：{count}</button>
    </div>
  )
}

export default App04
